<template>
	<view class="app-pages">
		<view class="content">
			<view class="cell">
				<view class="padding">
					<u-cell :border="false">
						<view class="" slot="title">成人登塔门票</view>
						<view class="tips" slot="label" @click="show = true">购票须知</view>
						<view class="app-pirce-color" slot="value">
							<text style="font-size: 20rpx;">￥</text>
							<text>80</text>
						</view>
					</u-cell>
				</view>
			</view>


			<view class="cell">
				<view class="padding">
					<u-cell :border="true">
						<view class="" slot="title">预订时间</view>
						<view class="" slot="value">
							<view class="cell-right">
								<text style="margin-right: 10rpx;">07月06日</text>
								<u-icon name="arrow-right" size="24rpx" color="rgb(144, 147, 153)"></u-icon>
							</view>
						</view>
					</u-cell>

					<u-cell :border="false">
						<view class="" slot="title">购买数量</view>
						<view class="" slot="value">
							<view class="cell-right">
								<u-number-box v-model="value">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 30px;text-align: center;"
										class="input">{{value}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
					</u-cell>
				</view>
			</view>


			<view class="cell">
				<view class="padding">
					<u-cell :border="false">
						<view class="" slot="title">游客信息</view>
						<view class="tips" slot="value" @click="handleRouter('/homePages/scenicSpot/passengers')">选择</view>
					</u-cell>

					<u-cell :border="false">
						<view class="" slot="title">出游人</view>
						<view class="tips" slot="value">
							<u--input border="bottom" placeholder="请输入出游人" v-model="value" :customStyle="{
								 width:'400rpx'
							 }" />
						</view>
					</u-cell>

					<u-cell :border="false">
						<view class="" slot="title">手机号</view>
						<view class="tips" slot="value">
							<u--input border="bottom" placeholder="请输入手机号" v-model="value" :customStyle="{
								width:'400rpx'
							}" />
						</view>
					</u-cell>

					<u-cell :border="false">
						<view class="" slot="title">身份证</view>
						<view class="tips" slot="value">
							<u--input border="bottom" placeholder="请输入身份证" v-model="value" :customStyle="{
								width:'400rpx'
							}" />
						</view>
					</u-cell>
				</view>
			</view>
		</view>
		<!-- 购票须知 -->
		<u-popup :show="show" mode="center">
			<view class="popup">
				<view class="cell">
					<u-cell :border="true">
						<view class="" slot="title">购票须知</view>
						<view class="" slot="value">
							<u-icon @click="show = false" name="close-circle" size="30rpx"
								color="rgb(144, 147, 153)"></u-icon>
						</view>
					</u-cell>
					<view class="padding">

						<u-cell :border="false">
							<view class="tips" slot="title">入塔须知</view>
							<text class="label" slot="label">
								1、开发时间：08:30-22:00；
								2、所有票型一经验证不予退款；
								3、门票当天有效，出园需入园，需再次购票；
								4、为保证入园顺利，预订时务必填写真实姓名、手机号等信息
							</text>
						</u-cell>

						<u-cell :border="false">
							<view class="tips" slot="title">入塔须知</view>
							<text class="label" slot="label">
								1、开发时间：08:30-22:00；
								2、所有票型一经验证不予退款；
								3、门票当天有效，出园需入园，需再次购票；
								4、为保证入园顺利，预订时务必填写真实姓名、手机号等信息
							</text>
						</u-cell>
					</view>
				</view>
			</view>
		</u-popup>



		<!-- 底部按钮 -->
		<view class="btn app-pages">
			<view class="btn-left">
				<text>应付金额：</text>
				<text class="app-pirce-color">
					<text style="font-size: 26rpx;">￥</text>
					<text>36.00</text>
				</text>
			</view>
			<view class="btn-right">
				<view class="button">
					<view class="submit" @click="handleRouter('/homePages/scenicSpot/orderDetails')">提交订单</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				value: 0,
				show: false
			}
		},
		methods: {
			handleRouter(url){
				uni.navigateTo({
					url
				})
			},
		},
		onLoad(options) {
			console.log('上个页面所有的内容', options)
		}
	}
</script>
<style lang="scss" scoped>
	.content ::v-deep .u-cell__body {
		padding: 20rpx 0 !important;
	}
	.content{
		padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
	}
	.btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		height: 120rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		font-size: 40rpx;
		box-shadow: 0 -1rpx 4rpx #ccc;
		z-index: 99;
		.btn-right {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.button {
			padding-left: 30rpx;

			.submit {
				padding: 15rpx 35rpx;
				border-radius: 4rpx;
				color: #FFFFFF;
				background-color: #f74062;
			}
		}

		.btn-left {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.popup {
		width: 700rpx;

		.cell {
			box-shadow: none;
			margin-top: 0;
			.label {
				padding-left: 30rpx;
				padding-top: 20rpx;
			}

			.padding {
				padding: 0 40rpx;
			}
		}
	}

	.cell {
		margin-top: 30rpx;
		box-shadow: 0 0 4rpx #ccc;
	}

	.tips {
		padding-top: 20rpx;
		font-size: 26rpx;
		color: #F59A23;
	}

	.cell-right {
		display: flex;
		align-items: center;
	}

	.padding {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}



	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #f74062;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>
